CSS Seçiciler - Genel kardeş Seçiciler
CSS2 sürümünde ortaya çıkarılan “bitiş kardeş seçiciler” özelliği ile yakın bir seçicidir. Genel kardeş seçicileri CSS3 ile gelen en kullanışlı özelliklerden birisidir. Mesela CSS ya da CSS2 dönemlerinde sitenin üst menülerini hizaya sokmak için ya da aralarına padding vermek için biraz zahmet çekerdik ki mobil uyumlu siteyi o şekilde yapmak tam bir çile haline geliyor.
Mesela menüyü sağa yasladığımızda aralarına 5px margin-right vermiş olsak en sağda boşluk kalıyordu ama genel kardeş seçiciler ile bu soruna çözüm bulabiliyoruz. Çünkü bu özellik sayesinde iki elemanın ortasına boşluk ya da padding değeri atayabiliyoruz. Örnek vermek gerekirse:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
img{ float:left; }
img ~ p{ margin-left:110px; }
</style>
</head>
<body>
<img src="hamster.jpg" width="120" height="120" alt="kedi" />
<p>Hamster</p> <p>Beyaz renkli</p>
<p>oyuncu ve sevecen</p>
</body>
</html>
Pseudo-Classes (Sözde Sınıflar) ve Pseudo-Elements (Sözde Elementler)
Sözde sınıflar ve Sözde elementler CSS3 ile gelen en etkileşimli seçicilerdir birisidir. Bu seçiciler HTML yapısında bulunmayan class ve elemanlara uygulanır.
Pseudo-Class: Bu seçici bir elemanın etkileşimli yönlerine müdahale ederek style tanımlaması yapar. Örnek vermek gerekirse; :hover, :focus, gibi durumlarda style tanımlaması yapabilecek özelliklere sahiptir.
Pseudo-Element: Bu seçici Elementlerin alt sınıflarına erişerek style tanımlaması yapar. Örnek vermek gerekirse; bir yazının ilk satırına, bir yazının sonuna, bir kelimenin ilk veya son harfine style tanımlaması yapmak için kullanılmaktadır.
Pseudo-Classes Özellikleri ve Açıklamaları
:link
Ziyaret edilmeyen linkler için style tanımlar.
:visited
Ziyaret edilen linkler için style tanımlar
:active
Bağlantıya tıklayıp bırakana kadar geçen süredeki style tanımlamasını yapar.
:hover
Bağlantının üzerine Mouse ile gelindiğinde ssstyle tanımlar
:focus
Form elemanlarında tıklandığı zamanki style özelliklerini tanımlar.
:first-child
Bir html elemanı içerisinde bulunan benzer elemanların ilk elemanının stlye özelliklerini belirler
<style> p:first-child { background-color: yellow; } </style>
Bir div içerisinde 4 tane alt alta paragraf ( <p> ) olduğunu düşünün. Bu seçici ilk baştaki paragraf ögesinin arka plan rengini sarı yapar.
:lang()
Sözde sınıf Farklı diller için özel kurallar tanımlamanızı sağlar. Aşağıdaki örnekte, :lang = "no" olan <q> öğelerinin tırnak işaretlerini tanımlar:
<html>
<head>
<style>
q:lang(no) { quotes: "~" "~"; }
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
:root
HTML’in geneli için kullanılır. Mesela sayfa arka plan rengini değiştirebilir, sayfadaki yazalra standart bir font, renk atayabilirsiniz. Body ile aynı fonksiyona sahip olduğunu düşünmekteyim
:not()
İlginç bir özellik bence ve kullanışlıda olabilir. Bundan hariç hepsine tanımlanan style’ı yükle diyebilen bir seçici. Örneğin: :not() parantez içine yazdığınız herhangi bir html elemanını tanımlanan style’dan hariç tutar ve kalan tüm elemanlara uygular.
:not(p) { color: #ff0000; }
Yukarıdaki style örneğinde parantez içindeki paragraf etiketi hariç sayfada kalan tüm ögelere (div, img, input…) bildirim bloğu içinde tanımlanan style özelliğini verir.
:empty
Bu da işe yarayacak özelliklerden birisi. Bu seçicinin amacı. İçeriğinde hiçbir şey olmayan html elemanlarına style tanımlar.
<style>
p:empty { width: 100px; height: 20px; background: #ff0000; }
</style>
Yukarıdaki örnekte; <p> etiketine bir takım style özellikleri bildirim bloğu içerisinde tanımlanmış. P etiketinin içeriği html kısmında boş ise yani şu şekilde ise <p></p> bu tanımlanan style özellikleri uygulanacaktır.
:first-of-type
Birden fazla aynı türden olan html elemanlarının ilk olanına style özellikleri tanımlar.
<!DOCTYPE html>
<html>
<head>
<style>
p:first-of-type { background: red; }
</style>
</head>
<body>
<p>The first paragraph.</p> <!—buradaki p etiketi ilk olduğu için style özelliğinden etkilenecektir -->
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</body>
</html>
:last-child
HTML elemanlarından en sonuncusuna style tanımlaması yapar.
:last-of-type
Aynı özellikte birden fazla olan html elemanında en sonuncuya style tanımlaması yapar.
<!DOCTYPE html>
<html>
<head>
<style>
p:first-of-type { background: red; }
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p><!—buradaki p etiketi sonuncu olduğu için style özelliğinden etkilenecektir -->
</body>
</html>
:only-child
: Only-child seçici, ebeveyninin tek çocuğu olan her öğeye style tanımlar.
<html>
<head>
<style> p:only-child { background: red; }</style>
</head>
<body>
<div><p>Bu bir paragraf<p></div> <!--Buradaki div içerisinde sadece p etiketi olduğu için, yani div elementinin tek alt ögesi p elementi olduğu için sadece buraya uygulanır. -->
<div><span>bu bir Span Etiketi.</span><p> Bu bir paragraf </p></div>
<p><b>Note:</b> Internet Explorer 8 ve sonraki sürümlerde çalışır.</p>
</body>
</html>
:only-of-type
İki div elementi var bunlardan bir tanesinin içerisinde 1 adet diğerinin içerisinde ayrı ayrı iki adet <p> elementi var diyelim :only-of-type içerisinde 1 tane p elementi olana style tanımlar.
<!DOCTYPE html>
<html>
<head>
<style>
p:only-of-type { background: red; }
</style>
</head>
<body>
<div><p>This is a paragraph.</p></div><!--Buradaki div içerisinde sadece 1 adet p etiketi olduğu için, sadece buraya uygulanır. -->
<div><p>This is a paragraph.</p><p>This is a paragraph.</p></div>
</body>
</html>
:nth-child()
Aynı tür html elmanlarından belirtilen sıradakine style özelliği tanımlar. Örneğin p:bth-child(2) dediğiniz zaman 2. Sıradaki p elementine style tanımlayacaktır.
:nth-last-of-type()
5 adet p elementi olduğunu farz edelim. P:last-of-type(2) dediğimiz zaman sondan ikinci olana style tanımlaması yapar.
:nth-last-child()
Bu seçici de, aynı türden olan elementlerden sondan başlayarak istediğimiz sıradakini seçmemize yarar. Mesela 5 adet <p> elementi varsa ve biz p:nth-last-child(2) seçicisini uyguladıysak sondan ikinci olan <p> elementine style tanımlamış oluruz.
:nth-of-type()
Bu seçici de önemli bir seçicidir ve çok kullanışlıdır. Elinizde 9 tane <li> elementi olsun diyelim ve siz bu li elementlerinin her 3. Sırasındaki elemente style uygulamak istiyorsunuz mesela arka planını farklı istiyorsunuz. O zaman li:nth-of-type(2){ background-color:red; } style’ını eklemeniz yeterli olacaktır. Bu style tanımlandığında 9 adet li elementinden 2. 4. 6. 8. Sıraların arka planları kırmızı olacaktır.
